<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <title>vue-api-webpack</title>
  <style>
    #progressModal {
      position: fixed;
      width: 80px;
      height: 80px;
      top: calc(50% - 40px);
      left: calc(50% - 40px);
      z-index: 9999;
    }

    .spinner {
      width: 80px;
      text-align: center;
    }

    .spinner > div {
      width: 20px;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0.0)
      }
      40% {
        -webkit-transform: scale(1.0)
      }
    }

    @keyframes bouncedelay {
      0%,
      80%,
      100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      }
      40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body onload="onload()">
<div id="progressModal">
  <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>
</div>
<div id='root' v-cloak>
</div>
<script src="../static/js/fastclick.js" type='application/javascript'></script>
<script src="../static/js/vconsole.min.js" type='application/javascript'></script>
<script>
  var modEl = document.getElementById('progressModal');
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function () {
      FastClick.attach(document.body);
    }, false);
  }

  function onload() {
    modEl.style.display = 'none';
    var backDom = document.querySelector('.van-nav-bar__left .van-nav-bar__arrow');
    if (backDom) {
      backDom.addEventListener('click', function () {
        closeWin();
      })
    }
  }

  /**
   * 关闭窗口
   */
  function closeWin() {
    if (window.api) {
      api.closeWin();
    } else{
      history.go(-1);
    }
  }
</script>
</body>
</html>
